<!doctype html>
<!--
Copyright 2015 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="description" content="Sample of registering multiple service worker fetch handlers.">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Service Worker Sample: Pre-fetching Resources During Registration</title>

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="../../images/touch/chrome-touch-icon-192x192.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-title" content="Service Worker Sample: Multiple Fetch Handlers">

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="apple-touch-icon-precomposed" href="../../images/apple-touch-icon-precomposed.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
  <meta name="msapplication-TileColor" content="#3372DF">

  <link rel="icon" href="../../images/favicon.ico">

  <script>
    // Service workers require HTTPS (http://goo.gl/lq4gCo). If we're running on a real web server
    // (as opposed to localhost on a custom port, which is whitelisted), then change the protocol to HTTPS.
    if ((!location.port || location.port == "80") && location.protocol != 'https:') {
      location.protocol = 'https:';
    }
  </script>

  <link rel="stylesheet" href="../../styles/main.css">
</head>

<body>
<h1>Service Worker Sample: Multiple Fetch Handlers</h1>

<p>Available in <a href="https://www.chromestatus.com/feature/6561526227927040">Chrome 40+</a></p>

<p>
  This sample demonstrates best practices for registering multiple <code>fetch</code> event
  handlers within a service worker.
</p>

<p>
  Visit <code>chrome://inspect/#service-workers</code> and click on the "inspect" link below
  the registered service worker to view logging statements for the various actions the
  <code><a href="service-worker.js">service-worker.js</a></code> script is performing.
</p>

<div class="output">
  <div id="status"></div>

  <div id="links" style="display: none">
    <p>
      The following links trigger responses generated by the
      <a href="service-worker.js">service worker</a>. There are two <code>fetch</code> handlers
      registered in the service worker: the one that's registered first intercepts requests ending
      with <code>/hello/world</code> and the one that's registered second intercepts requests that
      contain <code>/hello/</code> anywhere in their URL.
    </p>

    <p>
      Since it's registered first, the handler which intercepts <code>/hello/world</code> requests
      will always have the first chance to return a response via <code>event.respondWith()</code>.
      Only if the first handler doesn't call <code>event.respondWith()</code>, the second handler
      gets its chance to call <code>event.respondWith()</code>.
    </p>

    <p>
      If none of the registered <code>fetch</code> handlers call <code>event.respondWith()</code>,
      then the browser will handle the request by making a normal HTTP request, as if there were
      no service worker involvement. This isn't an error condition, and it's a fine way
      of ensuring that the default behavior is triggered.
    </p>

    <ul>
      <li><a href="hello/world" target="_blank">Hello, World!</a></li>
      <li><a href="hello/brooklyn" target="_blank">Hello, Brooklyn!</a></li>
    </ul>
  </div>
</div>

<script>
  function showLinks() {
    document.querySelector('#links').style.display = 'block';
  }

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./service-worker.js', {scope: './'})
      .then(showLinks)
      .catch(function(error) {
        // Something went wrong during registration. The service-worker.js file
        // might be unavailable or contain a syntax error.
        document.querySelector('#status').textContent = error;
      });
  } else {
    // The current browser doesn't support service workers.
    var aElement = document.createElement('a');
    aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
    aElement.textContent = 'Service workers are not supported in the current browser.';
    document.querySelector('#status').appendChild(aElement);
  }
</script>

<script>
  /* jshint ignore:start */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-53563471-1', 'auto');
  ga('send', 'pageview');
  /* jshint ignore:end */
</script>
<!-- Built with love using Web Starter Kit -->
</body>
</html>
